<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Typography</title>
	    <link rel="stylesheet" href="css/header_footer.css">
    <link rel="stylesheet" href="css/body.css">
    <link rel="stylesheet" href="css/about.css">
    <link rel="stylesheet" href="css/contact.css">
</head>
<body>
<header class="header">
    <div class="containter">
        <p>24/7 Support &nbsp; : &nbsp; 010-25418796
            <select class="right">
                <option value="English">English</option>
                <option value="China">China</option>
            </select>
        </p>
    </div>
</header>
<nav>
    <div class="containter">
        <div class="left nav_img">
            <img src="images/logo.png" alt="" width="100%">
        </div>
        <ul class="right nav_block_a">
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Typography</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">Mall</a></li>
        </ul>
    </div>
    <div class="clear"></div>
</nav>
<article class="nav_name">Typography</article>
<section>
    <div class="containter padding60">
        <div class="h1_h6">
            <h1 class="color_grey padding10">Headings</h1>
            <div> <h1>h1. Bootstrap heading <span>Semibold 36pxs</span></h1></div>
            <div> <h2>h2. Bootstrap heading <span>Semibold 30pxs</span></h2></div>
            <div> <h3>h3. Bootstrap heading <span>Semibold 24pxs</span></h3></div>
            <div>  <h4>h4. Bootstrap heading <span>Semibold 18pxs</span></h4></div>
            <div>  <h5>h5. Bootstrap heading <span>Semibold 14pxs</span></h5></div>
            <div> <h6>h6. Bootstrap heading <span>Semibold 12pxs</span></h6></div>
        </div>
        <div class="clear"></div>
        <div class="button-team padding40">
            <h3 class="color_grey">Buttom</h3>
            <h1 class="h h1 magin_button15">
                <a href="" class="b_grey">Default</a>
                <a href="" class="b_black">Primary</a>
                <a href="" class="b_green">Success</a>
                <a href="" class="b_blue">Info</a>
                <a href="" class="b_orange">Warning</a>
                <a href="" class="b_red">Dangar</a>
            </h1>
            <h2 class="h h2 magin_button15">
                <a href="" class="b_grey">Default</a>
                <a href="" class="b_black">Primary</a>
                <a href="" class="b_green">Success</a>
                <a href="" class="b_blue">Info</a>
                <a href="" class="b_orange">Warning</a>
                <a href="" class="b_red">Dangar</a>
            </h2>
            <h3 class="h h3 magin_button15">
                <a href="" class="b_grey">Default</a>
                <a href="" class="b_black">Primary</a>
                <a href="" class="b_green">Success</a>
                <a href="" class="b_blue">Info</a>
                <a href="" class="b_orange">Warning</a>
                <a href="" class="b_red">Dangar</a>
            </h3>
            <h4 class="h h4 magin_button15">
                <a href="" class="b_grey">Default</a>
                <a href="" class="b_black">Primary</a>
                <a href="" class="b_green">Success</a>
                <a href="" class="b_blue">Info</a>
                <a href="" class="b_orange">Warning</a>
                <a href="" class="b_red">Dangar</a>
            </h4>
            <h5 class="h h5 magin_button10">
                <a href="" class="b_grey">Default</a>
                <a href="" class="b_black">Primary</a>
                <a href="" class="b_green">Success</a>
                <a href="" class="b_blue">Info</a>
                <a href="" class="b_orange">Warning</a>
                <a href="" class="b_red">Dangar</a>
            </h5>
            <h6 class="h h6 magin_button10">
                <a href="" class="b_grey">Default</a>
                <a href="" class="b_black">Primary</a>
                <a href="" class="b_green">Success</a>
                <a href="" class="b_blue">Info</a>
                <a href="" class="b_orange">Warning</a>
                <a href="" class="b_red">Dangar</a>
            </h6>
        </div>
        <div class="clear"></div>
        <div class="padding40">
            <h3 class="color_grey">Progress Bars</h3>
            <div class="progress">
                <div class="left b_blue" style="width: 30%">&nbsp;</div>
            </div>
            <p class="color_grey">info with <span class="progress_span">progress-bar-info </span>class.</p>
            <div class="progress">
                <div class="left b_sky" style="width: 60%">&nbsp;</div>
            </div>
            <p class="color_grey">info with <span class="progress_span">rogress-bar-success</span>class.</p>
            <div class="progress">
                <div class="left b_green" style="width: 38%">&nbsp;</div>
            </div>
            <p class="color_grey">info with <span class="progress_span">progress-bar-warning</span>class.</p>
            <div class="progress">
                <div class="left b_orange" style="width: 70%">&nbsp;</div>
            </div>
            <p class="color_grey">info with <span class="progress_span">progress-bar-danger</span>class.</p>
            <div class="progress">
                <div class="left b_red" style="width: 50%">&nbsp;</div>
            </div>
            <p class="color_grey">info with <span class="progress_span">progress-bar-inverse</span>class.</p>
            <div class="progress">
                <div class="left b_grey" style="width: 40%">&nbsp;</div>
            </div>
            <p class="color_grey">info with <span class="progress_span">progress-bar-inverse </span>class.</p>
            <div class="progress">
                <div class="left b_green" style="width: 30%">&nbsp;</div>
                <div class="left b_red" style="width: 20%">&nbsp;</div>
                <div class="left b_orange" style="width: 10%">&nbsp;</div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="padding40">
            <h3 class="padding20 color_grey">Pagination</h3>
            <div class="form1">
              <nav>
                  <ul class="pagination_ul fontsice_18">
                      <li><a href="">«</a></li>
                      <li><a href="">1</a></li>
                      <li><a href="">2</a></li>
                      <li><a href="">3</a></li>
                      <li><a href="">4</a></li>
                      <li><a href="">5</a></li>
                      <li><a href="">»</a></li>
                  </ul>
              </nav>
                <div class="clear"></div>
                <nav>
                    <ul class="pagination_ul fontsice_14">
                        <li><a href="">«</a></li>
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">»</a></li>
                    </ul>
                </nav>
                <div class="clear"></div>
                <nav>
                    <ul class="pagination_ul fontsice_10">
                        <li><a href="">«</a></li>
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">»</a></li>
                    </ul>
                </nav>
            </div>
            <div class="form2">
                <nav>
                    <ul class="pagination_ul fontsice_18">
                        <li><a href="">«</a></li>
                        <li><a href="" class="pagination_ul_a">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">»</a></li>
                    </ul>
                </nav>
                <div class="clear"></div>
                <nav>
                    <ul class="pagination_ul fontsice_14">
                        <li><a href="">«</a></li>
                        <li><a href="" class="pagination_ul_a">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">»</a></li>
                    </ul>
                </nav>
                <div class="clear"></div>
                <nav>
                    <ul class="pagination_ul fontsice_10">
                        <li><a href="">«</a></li>
                        <li><a href="" class="pagination_ul_a">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">»</a></li>
                    </ul>
                </nav>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <div class="">
            <h3 class="color_grey padding10">Breadcrumbs</h3>
            <div class="progress"><ul><li class="color_blue">Home </li></ul></div>
            <div class="progress"><ul><li class="color_blue">Home </li><li class="color_blue">&nbsp;/ Library</li></ul></div>
            <div class="progress"><ul><li class="color_blue">Home </li><li class="color_black">&nbsp;/ Library</li><li class="color_blue">&nbsp;/ Data</li></ul></div>
        </div>
    </div>
 </section>
<footer>
    <div class="containter padding40">
        <div class="form1">
            <img src="images/footer_logo.png" alt="" class="nav_img"><br>
            <span class="p_footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
        </div>
        <div class="form2">
            <ul class="ul02 right">
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Typography</a></li>
                <li><a href="">Gallery</a></li>
                <li><a href="">Mail</a></li>
            </ul>
            <p class="right padding10 size14">Copyright © 2015.Company name All rights reserved.网页模板</p>
        </div>
        <div class="clear"></div>
    </div>
</footer>
</body>
</html>